import { Space } from 'antd';
import React, { useState } from 'react';
import type { ProTableProps } from '@ant-design/pro-components';
import ProTable from '@ant-design/pro-table';


type valueType = Array<React.Key>

interface ImgUploadProps {
    value?: valueType;
    onChange?: (value: valueType) => void;
    ProTableProps: ProTableProps<any, any>
}





const App: React.FC<ImgUploadProps> = ({ value = [], onChange = () => { }, ProTableProps }) => {
    const [selected] = useState(value)

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], node) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, node);
            onChange(node)
        },
        getCheckboxProps: (record: any) => ({
            disabled: selected.includes(record.id), // Column configuration not to be checked
            name: record.title,
        }),
    };

    return (
        <>
            <ProTable
                {...ProTableProps}
                rowSelection={
                    { ...rowSelection }
                }
                toolBarRender={false}
                search={false}
                tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
                    <Space size={24}>
                        <span>
                            已选 {selectedRowKeys.length} 项
                            <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                                取消选择
                            </a>
                        </span>
                    </Space>
                )}
            />
        </>
    );
};

export default App;